<template>
  <div class="pay">
    <el-descriptions title="订单详情">
      <el-descriptions-item label="创建时间">{{orderdetail.create_time}}</el-descriptions-item>
      <el-descriptions-item label="订单号">{{orderdetail.orderDetail[0].order_id}}</el-descriptions-item>
      <el-descriptions-item label="购买用户">{{userinfo.nickname}}</el-descriptions-item>
      <el-descriptions-item label="产品名称">{{orderdetail.orderDetail[0].productName}}</el-descriptions-item>
      <el-descriptions-item label="产品描述">{{orderdetail.orderDetail[0].description}}</el-descriptions-item>
      <el-descriptions-item label="购买数量">{{orderdetail.orderDetail[0].quantity}}</el-descriptions-item>
      <el-descriptions-item label="手机号">18100000000</el-descriptions-item>
      <el-descriptions-item label="居住地">苏州市</el-descriptions-item>
      <el-descriptions-item label="总价格">
        <el-tag size="small">{{orderdetail.total_fee}}</el-tag>
      </el-descriptions-item>
    </el-descriptions>

    <!-- 微信生成二维码 -->
    <div class="qrimg">
      <h1>请使用微信支付</h1>
      <img :src="payurl"
           alt="">
    </div>
  </div>
</template>

<script>
  import qrcode from 'qrcode'
  import { mapState } from 'vuex'
  import * as api from "../../../../api"
  export default {
    data() {
      return {
        //数据不报错，先声明数据占位
        orderdetail: {
          orderDetail: [{ productName: "", description: '', quantity: '' }]
        },
        payurl: '',
      }
    },
    created() {
      //3.如果刷新了页面，本次交易取消
      if (!this.order_id) {
        this.$alert("本次交易取消,请重新提交", '提示', {
          confirmButtonText: '确定',
          callback: action => {

            this.$router.push({ name: 'pre_order' })
          }
        })
        return
      }
      //1.根据订单id请求订单详情
      Promise.all([api.getorders(this.order_id), api.payapi(this.order_id)])
        .then((res) => {

          this.orderdetail = res[0].data.data
          //this.payurl = res[1].data.code_url
          //2.根据订单id获取微信支付地址
          //调用生成二维码的方法
          qrcode.toDataURL(res[1].data.code_url, (err, dataurl) => {
            this.payurl = dataurl
          })
        })
        .catch((err) => { console.log(err) })

      //轮询查看订单支付结果
      this.orderstate = setInterval(() => {
        api.getOrdersState(this.order_id).then((res) => {
          console.log(res);
          if (res.data.state) {
            //很重要清除定时器
            clearInterval(this.orderstate)
            //订单支付成功跳转到支付成功的页面
            this.$router.push({ name: 'paysuccess' })
          }
        })
      }, 5500)
    },
    components: {
    },
    methods: {
    },
    computed: {
      ...mapState(['order_id', 'userinfo'])
    },

    beforeDestroy() {
      clearInterval(this.orderstate)
    }
  }

</script>

<style lang='scss' scoped>
</style>
